<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn">
        <i class="fas fa-arrow-left"></i>
      </view>
      <view class="header-title">UI/UX设计大师班</view>
      <view class="action-btn">
        <i class="fas fa-share-alt"></i>
      </view>
    </view>
    
    <!-- 课程封面 -->
    <view class="course-cover">
      <view class="course-tag">进行中</view>
      <view class="course-title">从零到精通：UI/UX设计实战</view>
      <view class="course-meta">
        <view class="meta-item">
          <i class="fas fa-user-graduate"></i> 1285人学习
        </view>
        <view class="meta-item">
          <i class="fas fa-star"></i> 4.9 (326评价)
        </view>
      </view>
    </view>
    
    <!-- 课程信息卡片 -->
    <view class="info-card">
      <view class="info-grid">
        <view class="info-item" v-for="(item, index) in infoData" :key="index">
          <view class="info-label">{{ item.label }}</view>
          <view class="info-value">{{ item.value }}</view>
        </view>
      </view>
      
      <view class="progress-container">
        <view class="progress-label">
          <span>学习进度</span>
          <span>{{ progressData.completed }} / {{ progressData.total }} 课时</span>
        </view>
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: progressData.percentage + '%' }"></view>
        </view>
      </view>
      
      <view class="tags-container">
        <view class="tag" v-for="tag in tagsData" :key="tag.value">
          {{ tag.text }}
        </view>
      </view>
      
      <view class="teacher-section">
        <view class="teacher-avatar">
          <image :src="teacherAvatar" alt="讲师头像"></image>
        </view>
        <view class="teacher-info">
          <h3>{{ teacherName }}</h3>
          <p>{{ teacherExperience }}</p>
        </view>
      </view>
    </view>
    
    <!-- 课表部分 -->
    <view class="schedule-section">
      <view class="section-title">
        <i class="fas fa-calendar-alt"></i> 课程安排
      </view>
      
      <view class="schedule-tabs">
        <view class="tab" v-for="(tab, index) in tabsData" :key="index" @click="changeTab(index)">
          {{ tab.text }}
        </view>
      </view>
      
      <view class="schedule-list" v-if="currentTab === 'all'">
        <view class="lesson-item" v-for="(lesson, index) in lessonsData" :key="index" @click="enterLesson(lesson.title)">
          <view class="lesson-icon">
            <i class="fas fa-play-circle"></i>
          </view>
          <view class="lesson-content">
            <view class="lesson-title">{{ lesson.title }}</view>
            <view class="lesson-meta">
              <view><i class="far fa-clock"></i> {{ lesson.date }}</view>
              <view><i class="fas fa-video"></i> {{ lesson.duration }}</view>
            </view>
          </view>
          <view class="lesson-status" :class="lesson.status">
            {{ lesson.statusText }}
          </view>
        </view>
      </view>
      
      <!-- 其他课程列表 -->
      <view class="schedule-list" v-if="currentTab === 'unfinished'">
        <!-- 未完成课程 -->
      </view>
      
      <view class="schedule-list" v-if="currentTab === 'completed'">
        <!-- 已完成课程 -->
      </view>
    </view>
    
    <!-- 签到弹窗 -->
    <view class="modal" v-if="showModal">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">课程签到</view>
          <view class="modal-subtitle">第5课：交互原型设计实战</view>
        </view>
        <view class="modal-body">
          <view class="sign-info">
            <view class="info-box">
              <view class="info-label">签到时间</view>
              <view class="info-value">14:00-14:10</view>
            </view>
            <view class="info-box">
              <view class="info-label">当前时间</view>
              <view class="info-value" id="current-time">{{ currentTime }}</view>
            </view>
          </view>
          
          <view class="location-container">
            <view class="location-icon">
              <i class="fas fa-map-marker-alt"></i>
            </view>
            <view class="location-text">
              南宁市青秀区金湖广场
            </view>
            <view style="font-size: 26px; color: #7f8c8d; margin-top: 15px;">
              距离签到点：<span style="color: #4caf50;">125米</span>
            </view>
          </view>
          
          <view class="sign-btn-container">
            <button class="sign-confirm-btn" @click="confirmSign">
              <i class="fas fa-check-circle"></i> 立即签到
            </button>
          </view>
        </view>
        <view class="modal-close" @click="closeModal">
          <i class="fas fa-times"></i>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <button class="action-btn outline" @click="favoriteCourse">
        <i class="fas fa-bookmark"></i> 收藏
      </button>
      <button class="action-btn" @click="openSignModal" id="openSignBtn">
        <i class="fas fa-clipboard-check"></i> 课程签到
      </button>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const showModal = ref(false)
    const currentTime = ref('')
    const tabsData = ref([
      { text: '全部课程', value: 'all' },
      { text: '未完成', value: 'unfinished' },
      { text: '已完成', value: 'completed' }
    ])
    const currentTab = ref('all')
    const lessonsData = ref([
      // 示例数据
      { title: '第1课：UI设计基础入门', date: '08-12 14:00', duration: '45分钟', status: 'completed', statusText: '已完成' },
      { title: '第2课：设计工具Figma实战', date: '08-14 14:00', duration: '60分钟', status: 'completed', statusText: '已完成' },
      { title: '第3课：用户研究与需求分析', date: '08-16 14:00', duration: '55分钟', status: 'completed', statusText: '已完成' },
      { title: '第4课：信息架构与流程设计', date: '08-18 14:00', duration: '50分钟', status: 'completed', statusText: '已完成' },
      { title: '第5课：交互原型设计实战', date: '08-20 14:00', duration: '70分钟', status: 'live', statusText: '进行中' },
      { title: '第6课：设计评审与反馈处理', date: '08-22 14:00', duration: '45分钟', status: 'upcoming', statusText: '未开始' },
      { title: '第7课：设计系统构建', date: '08-24 14:00', duration: '65分钟', status: 'upcoming', statusText: '未开始' }
    ])
    const progressData = ref({ total: 20, completed: 13, percentage: 65 })
    const tagsData = ref([
      '设计基础',
      'Figma实战',
      '用户研究',
      '交互设计',
      '作品集指导'
    ])
    const teacherName = ref('张设计师')
    const teacherExperience = ref('前腾讯高级UI设计师，10年行业经验')
    const teacherAvatar = ref('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80')
    
    const openSignModal = () => {
      showModal.value = true
    }
    
    const closeModal = () => {
      showModal.value = false
    }
    
    const confirmSign = () => {
      alert('签到成功！您已成功签到第5课')
      showModal.value = false
      
      // 更新课程状态
      const currentLesson = document.querySelector('.lesson-status.status-live')
      currentLesson.textContent = '已完成'
      currentLesson.className = 'lesson-status status-completed'
      
      // 更新进度
      const progressFill = document.querySelector('.progress-fill')
      progressFill.style.width = '70%'
      document.querySelector('.progress-label span:last-child').textContent = '14/20课时'
    }
    
    const updateTime = () => {
      const now = new Date()
      const hours = now.getHours().toString().padStart(2, '0')
      const minutes = now.getMinutes().toString().padStart(2, '0')
      currentTime.value = `${hours}:${minutes}`
    }
    
    onMounted(() => {
      updateTime()
      setInterval(updateTime, 60000)
    })
    
    const changeTab = (index) => {
      currentTab.value = tabsData.value[index].value
    }
    
    const enterLesson = (title) => {
      alert(`即将进入课程：${title}`)
    }
    
    const favoriteCourse = () => {
      alert('课程收藏成功！')
    }
    
    return {
      showModal,
      currentTime,
      tabsData,
      currentTab,
      lessonsData,
      progressData,
      tagsData,
      teacherName,
      teacherAvatar,
      openSignModal,
      closeModal,
      confirmSign,
      updateTime,
      changeTab,
      enterLesson,
      favoriteCourse
    }
  }
}
</script>